<template>
  <div class="main">
      <!-- 专辑著作 -->
      <div class="albumbox">
          <p class="abumName">
              <span><el-tag size="small" type="danger">#{{info.tag.abName}}</el-tag></span>
              <span><el-tag size="small" type="warning" class="el-icon-view"> ：{{info.tag.abLook}}</el-tag></span>
              <span><el-tag size="small" type="warning">张数 ：{{info.node.length}}</el-tag></span>
          </p>
          <p class="abumCreate">创建人:官方</p>
          <p class="imgSize">{{info.tag.abMessage}}</p>
      </div>
      <AlbumNode :node="info.node"></AlbumNode>
  </div>
</template>

<script>
import AlbumNode from "@/components/album/albumnode"
export default {
    props:["id"],
    components:{AlbumNode},
    data(){
        return{
            info:{
                tag:{
                    abName:null,
                    abLook:null,
                    abMessage:null,
                },
                node:[
                    {
                        nodeId:null,
                        nodeImages:null,
                        nodeLook:null
                    }
                ]
            }
        }
    },
    methods:{
    },
    created(){
        this.$http.get("/album/albumdetails/"+this.id).then(va=>{
            if(va.data.code==200){
                this.info=va.data.data
            }
        })
    },
      mounted(){
   document.documentElement.scrollTop=0
  },
}
</script>

<style scoped lang="less">
    .main{
        width: 60%;
        height: auto;
        margin: 10px auto;
        // background: yellow;
        .albumbox{
            padding: 10px;
            width: 100%;
            height: 300px;
            // background: pink;
            position: relative;
            
            border-bottom: 2px solid #f9f8f7;
            span{
                margin-left: 5px;
            }
            .abumName{
                position: absolute;
                bottom: 10px;
                font-family: hw;
                span{
                    font-size: 10px;
                }
            }
            .abumCreate{
                position: absolute;
                bottom: 10px;
                right: 10px;
                font-family: hw;
            }
            .imgSize{
                text-align: center;
                line-height: 300px;
                font-size: 40px;
                font-family: ht;
            }
        }
    }
 @media  screen and (max-width: 1300px) {
        .main{
            width: 100% !important;
            .imgSize{
                font-size: 15px !important;
            }
        }
    
     }
</style>